<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>蜜眸小铺甜品屋</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <script type="text/javascript" src="../js/jquery.js"></script>

</head>
<body>
<!-- start header -->
<!--end header -->

<!-- start banner_x -->
<div class="banner_x center">
    <a href="./index.html" target="_blank">
        <div class="logo fl"></div>
    </a>

    <div class="wdgwc fl ml40">我的购物车</div>
    <div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
    <div class="dlzc fr" id="loginDiv" style="display:none">
        <ul>
            <li><a href="./login.html" target="_blank">登录</a></li>
            <li>|</li>
            <li><a href="./register.html" target="_blank">注册</a></li>
        </ul>

    </div>
    <div class="fr" id="userDiv" style="display:none">
        <ul>
            <li><a href="#" id="userLoginName"></a></li>
            <li>|</li>
            <li><a href="#" id="outLogin"></a></li>
            <li>|</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<div class="xiantiao"></div>
<div class="gwcxqbj">
    <div class="gwcxd center" id="cartInfo">
        <div class="top2 center">
            <div class="sub_top fl">
                <input type="checkbox" value="quanxuan" id="quanxuan"/>全选
            </div>
            <div class="sub_top fl">商品名称</div>
            <div class="sub_top fl">单价</div>
            <div class="sub_top fl">数量</div>
            <div class="sub_top fl">小计</div>
            <div class="sub_top fr">操作</div>
            <div class="clear"></div>
        </div>

    </div>
    <div class="jiesuandan mt20 center">
        <div class="tishi fl ml20">
            <ul>
                <li><a href="./index.html">继续购物</a></li>
                <li>|</li>
                <li>共<span id="totalNum">0</span>件商品，已选择<span id="selNum">0</span>件</li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="jiesuan fr">
            <div class="jiesuanjiage fl">合计（不含运费）：<span id="totalPrice">0.00</span>元</div>
            <div class="jsanniu fr"><input class="jsan" type="button" name="jiesuan" value="去结算" onclick="buyClick()"/>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>

</div>


<!-- footer -->
<footer class="center">

    <div class="mt20">蜜眸小铺甜品屋</div>
    <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div>
    <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
</footer>

<script type="text/javascript">
    $(function () {

        $.ajax({
            type: "get",
            url: "../card/query",
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {

                    var infos = data.info;
                    $(infos).each(function (data) {
                        var html = '<div class="content2 center">';
                        html += '<div class="sub_content fl ">';
                        html += '<input type="checkbox" name="id" value="' + this.id + '" class="quanxuan" id="uuid" />';
                        html += '</div>';
                        html += '<div class="sub_content fl"><img src=  "http://localhost:8081/images/' + this.imgPath + '" STYLE="width: 50PX;height: 70px"></div>';
                        html += '<div class="sub_content fl ft20">' + this.goodsName + '</div>';
                        html += '<div class="sub_content fl"><span class="price">' + this.price + '</span>元</div>';
                        html += '<div class="sub_content fl">';
                        html += '<input class="shuliang" name="num" type="number" value="' + this.num + '" step="1" min="1" onchange="cNumInfo(this, ' + this.price + ')">';
                        html += '</div>';
                        html += '<div class="sub_content fl">' + (this.price * this.num) + '元</div>';
                        html += '<div class="sub_content fl"><a href="" onclick="return deletethis()">×</a></div>';
                        html += '<div class="clear"></div>';
                        html += '</div>';

                        $("#cartInfo").append($(html));
                    })

                    // 设置全选事件
                    $("#quanxuan").click(function () {
                        if (this.checked) {
                            $(".quanxuan").prop("checked", true);
                        } else {
                            $(".quanxuan").prop("checked", false);
                        }

                        calTotalMoney();

                    })
                    // 设置选中某个复选框的事件
                    $(".quanxuan").click(function () {
                        if (this.checked == false) {
                            $("#quanxuan").prop("checked", false);
                        }
                        // 计算总价
                        calTotalMoney();
                    })
                }
            }

        })
    })
</script>


<script type="text/javascript">
    // 计算修改数量后，某个商品的总价
    function cNumInfo(numEle, price) {
        // 找到要显示价格的元素
        var ele = numEle.parentNode.nextSibling;
        //alert(ele.innerHTML);
        var v = parseInt(numEle.value) * parseFloat(price);
        ele.innerHTML = v + "元";
        // 修改数量后，计算总价
        calTotalMoney();
    }

    // 根据选择的checkbox，计算所选的商品的总价
    function calTotalMoney() {
        // 选中的商品
        var arr = $(".quanxuan:checked");
        // 所有的商品
        var checkboxs = $(".quanxuan");
        var prices = $(".price");
        var nums = $(".shuliang");
        var sum = 0;
        for (var i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked) {
                sum += parseFloat(prices[i].innerHTML) * parseInt(nums[i].value);
            }
        }
        $("#totalNum").html(checkboxs.length);
        $("#selNum").html(arr.length);
        $("#totalPrice").html(sum);
    }
    function deletethis() {
        var id = $("#uuid").val();
        $.ajax({
            type: "get",
            url: "../card/deleteCard",
            data: {"id":id},
            success: function (msg) {
                alert("进来了")
                if (msg == "1") {
                    alert("成功")
                    window.location.href = "gouwuche.html";
                }
            }
        });
return false;
    }
</script>

<script type="text/javascript">
    function buyClick() {
        var arr = $(".quanxuan:checked");
        if (arr.length == 0) {
            alert("没有选中购物车中商品，无法结算");
            return;
        }
        var data = "";
        var checkboxs = $(".quanxuan");
        var nums = $(".shuliang");
        for (var i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked) {
                data += "gid=" + checkboxs[i].value + "&";
                data += "num=" + nums[i].value + "&";
            }
        }
        $.ajax({
            type: "get",
            url: "../order/addOrder",
            //data:{gid:ids,num:num},
            data: data,
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    alert("结算成功");
                    window.location.href = "dingdanzhongxin.html";
                } else {
                    alert(data.info);
                }
            }


        })
    }
    $(function () {
        $.ajax({
            url:"../goodsUser/userLogin",
            type:"get",
            success:function (msg) {
//alert(msg);
                if (msg =="0") {
                    $("#loginDiv").css("display","block");
                    $("#userDiv").css("display","none");
                } else {
                    $("#loginDiv").css("display","none");
                    $("#userDiv").css("display","block");
                    $("#userLoginName").text(msg);
                    $("#outLogin").text("退出");
                }
            }
        });
    });

</script>


</body>
</html>
